/*
* @Author: zhanghang
* @Date:   2018-06-20 16:56:37
* @Last Modified by:   zhanghang
* @Last Modified time: 2018-06-20 17:21:44
*/
import Vue from 'vue'
new Vue({
  el: '#root',
  template: `<div>
              <p v-pre>{{text}}</p>
              <p v-cloak>{{text}}</p>
              <p v-once>{{text}}</p>
              <p v-show="active" v-text="text"></p>
              <p v-if="active" v-text="text"></p>
              <p v-else-if="text === 0"> text ===0 </p>
              <p v-else>else content</p>
              <p v-html="html"></p>
              <input type="text" v-model.number="text" />
              <input type="text" v-model.trim="text" />
              <input type="text" v-model.lazy="text" />
              <input type="checkbox" v-model="active" />
              <div>
                <input type="checkbox" :value="1" v-model="arr" />
                <input type="checkbox" :value="2" v-model="arr" />
                <input type="checkbox" :value="3" v-model="arr" />
              </div>
              <div>
                <input type="radio" value="one" v-model="picked" />
                <input type="radio" value="two" v-model="picked" />
              </div>
              <ul>
                <li v-for="item in arr" :key="item">{{item}}</li>
              </ul>
              <ul>
                <li v-for="(item, index) in arr" >{{index }}: {{item}}</li>
              </ul>
              <ul>
                <li v-for="(key, val, index) in obj" >{{key }}: {{val}}: {{index}}</li>
              </ul>
            </div>`,
  data: {
    arr: [1, 2, 3],
    obj: {
      a: '123',
      b: '456'
    },
    text: 0,
    active: false,
    picke: '',
    html: '<span>this is html</span>'
  }
})
